<template>

  <el-radio-group v-if="radioGroup" v-model="selectValue" :disabled="readonly" :size="size" @change="handleValueChange">
    <template v-for="(item, index) in dataList">
      <template v-if="hiddenKeys.indexOf(item.value) === -1">
        <el-radio-button v-if="radioButton" :key="index" :disabled="item.value == disableKey" :label="item.label" :value="item.value"/>
        <el-radio v-else :disabled="item.value == disableKey" :label="item.label" :value="item.value"/>
      </template>
    </template>
  </el-radio-group>

  <el-select v-else v-model="selectValue"
             :clearable="clearable"
             :disabled="readonly"
             :placeholder="placeholder"
             :size="size"
             @change="handleValueChange">

    <template v-for="(item, index) in dataList">
      <template v-if="hiddenKeys.indexOf(item.value) === -1">
        <!--suppress SuspiciousTypeOfGuard -->
        <el-option v-if="typeof(selectValue) == 'string'"
                   :key="index + '_string'"
                   :disabled="item.value == disableKey"
                   :label="item.label"
                   :value="'' + item.value">
        </el-option>

        <!--suppress EqualityComparisonWithCoercionJS -->
        <el-option v-else-if="typeof(selectValue) == 'number'"
                   :key="index + '_number'"
                   :disabled="item.value == disableKey "
                   :label="item.label"
                   :value="(('' + item.value).trim() === '') ? '' : item.value">
        </el-option>

        <!--suppress EqualityComparisonWithCoercionJS -->
        <el-option v-else :key="index + '_other'"
                   :disabled="item.value == disableKey"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </template>
    </template>
  </el-select>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { dictTypeMap } from '@/utils/global-dict.ts';

const props = defineProps({
  modelValue: {
    required: true
  },
  dictType: {
    type: String,
    required: true
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  readonly: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: true
  },
  defaultKey: {
    type: [Number, String],
    default: undefined
  },
  disableKey: {
    type: [Number, String],
    default: undefined
  },
  size: {
    type: String,
    default: ''
  },
  hiddenKeys: {
    type: Array,
    default: () => []
  },
  radioGroup: {
    type: Boolean,
    default: false
  },
  radioButton: {
    type: Boolean,
    default: true
  }
});

const dataList = computed(() => {
  return dictTypeMap[props.dictType] || []
});

const emit = defineEmits(['change', 'input', 'update:modelValue']);

const selectValue = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val);
  },
});

const handleValueChange = (val: any) => {
  emit('input', '' === val ? undefined : val);
  if (val && val !== '') {
    let itemList = dataList.value.filter(item => item.value == val)
    emit('change', itemList.length > 0 ? itemList[0] : null);
  } else {
    emit('change', null);
  }
};

</script>

<style lang="scss" scoped>

</style>
